Reguła CSS z-index pozwala układać kilka elementów na sobie, jak warstwy w programach graficznych. Im wyższa wartość przypisana do z-index, tym "wyżej" (bliżej użytkownika) znajduje się dany element.
W powyższym przykładzie nałożono na siebie dwa obrazy. W kodzie HTML są one umieszczone w bloku header.
Blok header obsługuje wyświetlanie flex, ułożenie elementów w rzędzie, wyśrodkowanie poziome i pionowe. Do tego posiada obramowanie i ustaloną na sztywno wysokość (wymaganą, by działało środkowanie pionowe).
Zdjęcie w tle ma ustalony z-index na 1, a napis na nim z-index na 2.
Dodatkowo, zdjęcie w tle posiada w CSS atrybut "position" z wartością "absolute". Kliknij tu żeby przejść do wyjaśnienia reguły "position" w CSS
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis eum fuga saepe labore minima quam dicta hic eius magnam natus ab perferendis, ad ipsum porro atque illum vero. Consectetur, odio? Modi officia atque error voluptate, unde, enim dolores adipisci ipsa rem sunt vitae nobis at nihil molestias, voluptatum dignissimos cum. Autem dicta cupiditate odio ea neque illo placeat sint. Doloribus! Odio ex doloribus, harum nihil obcaecati deleniti ad animi eaque temporibus sunt recusandae in quae perspiciatis facere modi non commodi dolorem praesentium at velit suscipit distinctio quos magnam beatae? Aliquid! Veniam, accusamus quaerat? Quos officiis quod harum beatae odio, repellat magnam et cupiditate fugit molestias facilis nisi ratione cumque fuga incidunt iste excepturi exercitationem tempora atque consectetur. Ad, harum quod! Omnis repudiandae maiores accusamus saepe earum quisquam voluptates dignissimos ab, dolores quae? Eveniet quod atque in? Cupiditate earum repellendus et fugiat at accusantium? Reiciendis, quos ex nesciunt doloribus quia repudiandae. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque repellat vero tempore obcaecati delectus ut, repellendus ullam? Possimus mollitia voluptatibus, harum delectus, aperiam porro aspernatur, vitae veniam doloribus expedita similique? Vitae voluptates laborum temporibus quis perferendis, rem iusto numquam cum minus consectetur ex corporis placeat unde non? Aut tempora facilis similique, optio impedit, sit sequi quisquam aspernatur incidunt ipsum odio. Dolorum praesentium molestiae, dolor sed, assumenda similique quidem corporis nobis asperiores debitis aspernatur ducimus deleniti odit qui magnam quia quaerat dicta nulla a, voluptates repudiandae molestias. Velit eaque totam quo. Itaque sit nostrum natus, quae earum quidem. Dolor alias quisquam voluptatum similique pariatur! Ab, dolores laboriosam! Porro sed aperiam saepe harum accusamus. Iusto natus quasi, accusantium vero voluptas aliquid ab. Fuga nemo iste maiores voluptas perferendis aspernatur mollitia neque, ratione molestiae dolores expedita accusantium ab eum repudiandae, iure consequatur quas sit suscipit? Nisi molestiae harum a quo eveniet quam dolore!